@extends('layouts.head')

@section('content')
<section class="content-header" id="content-header">
订单信息

</section>

<section class="content" id="content">
<div class="box box-solid" >
  <div class="box-header with-border">
    <el-button-group>
          <el-button @click="addOrderV = true " type="primary"  size="small" >添加</el-button>
          <el-button @click="getNew"   size="small" >刷新</el-button>
          <el-button  @click="allot()"  :disabled="!isCheckOne"  size="small">排产</el-button>
          <el-button  @click="finishRow()"  type="primary"   size="small">重新</el-button>
    </el-button-group> 
    <el-button size="small" type=""  @click="yesterday" icon="arrow-left"></el-button>
    <el-date-picker v-model="date" style="width: 120px" size="small" type="date" placeholder="选择日期" > </el-date-picker>
    <el-button  size="small" type="" @click="tomorrow"  icon="arrow-right" ></el-button>


</el-input>
  </div>
  <div class="box-body "  >
         <el-table ref="multipleTable" :data="orders" border bordertooltip-effect="dark" border="true"  highlight-current-row
    @current-change="lookRow"   @selection-change="checkOne" style="width: 100%;font-size: xx-small;" >
     
            <el-table-column  fixed="left" type="index" width="40" > </el-table-column>
            <el-table-column  fixed="left" label="产品" width="160">
                    <template scope="scope">
                        @{{ scope.row.goodsCode }}@{{ scope.row.goodsName }}
                    </template>
            </el-table-column>
            <el-table-column   label="单别" width="160"> 
                 <template scope="scope">
                        @{{ scope.row.orderType }}@{{ scope.row.orderNo }}@{{ scope.row.orderFn }}
                  </template>
            </el-table-column>
            <el-table-column  prop="orderDate" label="时间" width="120"> </el-table-column>
           
            <el-table-column  prop="output" label="要求" > 
                        <template scope="scope">
                        @{{ scope.row.output }}@{{ scope.row.unit }}
                        </template>
            </el-table-column>
            <el-table-column  prop="how" label="比率" > </el-table-column>
            <el-table-column  prop="alloted" label="分配" > </el-table-column>
<!--             <el-table-column fixed="right"  label="操作"  width="120">
                <template scope="scope">
                  <el-button-group>
                     
                      <el-button  @click="editRow(scope.row.id, orders)" type="primary" icon=" " size="mini">编辑</el-button>
                      <el-button  @click="delRow(scope.row.id, orders)" type="danger" icon=" " size="mini">删除</el-button>
                  </el-button-group>     
                </template>
            </el-table-column> -->
        </el-table>
        </br>
        <div class="block">
            <el-pagination @size-change=""  @current-change="getOrdersCurrentPage" :current-page="ordersCurrentPage" :page-size="4" layout="total, prev, pager, next, jumper" :total="ordersCount">
            </el-pagination>
        </div>

  </div>
</div>


<div class="box box-solid" >
  <div class="box-header with-border">
    <el-button-group>
          <el-button @click="addOrderV = true " type="primary"  size="small" >添加</el-button>
          <el-button @click="getNew"   size="small" >刷新</el-button>
          <el-button  @click="allot()"  :disabled="!isCheckOne"  size="small">排产</el-button>
          <el-button  @click="finishRow()"  type="primary"   size="small">重新</el-button>
    </el-button-group> 
    <el-button size="small" type=""  @click="yesterday" icon="arrow-left"></el-button>
    <el-date-picker v-model="date" style="width: 120px" size="small" type="date" placeholder="选择日期" > </el-date-picker>
    <el-button  size="small" type="" @click="tomorrow"  icon="arrow-right" ></el-button>


</el-input>
  </div>
  <div class="box-body "  >
         <el-table ref="multipleTable" :data="orders" border bordertooltip-effect="dark" border="true"  highlight-current-row
    @current-change="lookRow"   @selection-change="checkOne" style="width: 100%;font-size: xx-small;" >
     
            <el-table-column  fixed="left" type="index" width="40" > </el-table-column>
            <el-table-column  fixed="left" label="产品" width="160">
                    <template scope="scope">
                        @{{ scope.row.goodsCode }}@{{ scope.row.goodsName }}
                    </template>
            </el-table-column>
            <el-table-column   label="单别" width="160"> 
                 <template scope="scope">
                        @{{ scope.row.orderType }}@{{ scope.row.orderNo }}@{{ scope.row.orderFn }}
                  </template>
            </el-table-column>
            <el-table-column  prop="orderDate" label="时间" width="120"> </el-table-column>
           
            <el-table-column  prop="output" label="要求" > 
                        <template scope="scope">
                        @{{ scope.row.output }}@{{ scope.row.unit }}
                        </template>
            </el-table-column>
            <el-table-column  prop="how" label="比率" > </el-table-column>
            <el-table-column  prop="alloted" label="分配" > </el-table-column>
<!--             <el-table-column fixed="right"  label="操作"  width="120">
                <template scope="scope">
                  <el-button-group>
                     
                      <el-button  @click="editRow(scope.row.id, orders)" type="primary" icon=" " size="mini">编辑</el-button>
                      <el-button  @click="delRow(scope.row.id, orders)" type="danger" icon=" " size="mini">删除</el-button>
                  </el-button-group>     
                </template>
            </el-table-column> -->
        </el-table>
  </div>
</div>

<el-dialog title="添加订单" :visible.sync="addOrderV"   >
<el-form ref="form" :model="addOrderItem" label-width="80px">
  <el-form-item label="订单名">
    <el-input v-model="addOrderItem.orderNo" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="url">
    <el-input v-model="addOrderItem.orderDate"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="优先级">
      <el-input v-model="addOrderItem.goodsName"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="图标">
      <el-input v-model="addOrderItem.goodsCode"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="父级">
      <select  class="form-control" v-model="addOrderItem.pid">
      <option v-bind:value="0">  无 </option>
        <option v-for="option in orders" v-bind:value="option.id">
          @{{ option.name }}
        </option>
      </select>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addOrderV = false">取 消</el-button>
    <el-button type="primary" @click="submitAddOrder">确 定 </el-button>
  </span>
</el-dialog>


<el-dialog title="修改订单" :visible.sync="editOrderV"   >
  <el-form ref="form" :model="editOrderItem" label-width="80px">
    <el-form-item label="订单名">
    <el-input v-model="editOrderItem.orderNo" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="orderDate">
    <el-input v-model="editOrderItem.orderDate"  size="small"   ></el-input>
  </el-form-item>
  <el-form-item label="优先级">
      <el-input v-model="editOrderItem.goodsName"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="图标">
      <el-input v-model="editOrderItem.goodsCode"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="父级"   v-if="editOrderItem.url == 'parent' " >
       <el-input  :disabled="true" ></el-input>
  </el-form-item>
  <el-form-item label="父级"   v-else >
      <select  class="form-control" v-model="editOrderItem.pid">
      <option v-bind:value="0">  无 </option>
        <option v-for="option in orders" v-bind:value="option.id">
          @{{ option.name }}
        </option>
      </select>
  </el-form-item>
  
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editOrderV = false">取 消</el-button>
    <el-button type="primary" @click="submitEditOrder">确 定 </el-button>
  </span>
</el-dialog>



</section>
<script >
    var content =new Vue({
        el:'#content',
        data:{
            date:'<?php echo date('Y-m-d') ?>',
            addOrderV:false,
            editOrderV:false,
            orders:[],
            orderChrildren:[],
            ordersCount:1,
            ordersCurrentPage:1,
            type:0,
            addOrderItem:{_token:'',name:'',url:'',pid:0,rank:0,listRank:99,ico:'',state:0,},
            editOrderItem:{_token:'',},
            multipleSelection: [],
        },
        created:function(){
            this.$http.get('/order/getCurrentAllot/'+this.ordersCurrentPage).then((response) => {this.orders=response.data; console.log(response.data)},(response) =>{ }); 
            this.$http.get('/order/getCountAllot/').then((response) => {this.ordersCount=response.data; console.log(response.data)},(response) =>{ });       

        },
        computed: {
              isCheckOne:function(){
                if( this.multipleSelection.length == 1 ){
                  return true;
                }else{
                  return false;
                }
              }
        },
        methods:{
              getNew:function(){
                  this.type=0;
                  this.$http.get('/order/getCurrentAllot/'+this.ordersCurrentPage).then((response) => {this.orders=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/order/getCountAllot/').then((response) => {this.ordersCount=response.data; console.log(response.data)},(response) =>{ });        

              },

              search:function(){
                  console.log(this.searchWord);
                  this.$http.get('/order/search/'+this.searchWord).then((response) => {this.orders=response.data; this.ordersCount = this.orders.length;console.log('word,orders,success')},(response) =>{ console.log(response);}); 
                  
              } ,
              yesterday:function(){
                  console.log('yesterday');
              },
              tomorrow:function(){
                  console.log('tomorrow');
              },
              submitAddOrder:function(){
                  console.log('submitAddOrder');
                  this.addOrderV = false;
                  this.addOrderItem._token = '{{csrf_token()}}';
                  this.$http.post('/order/add',this.addOrderItem).then((response)=>{this.$notify.success('添加成功');
                              this.$http.get('/order/getCurrent/'+this.ordersCurrentPage+'/'+this.type).then((response) => {this.orders=response.data; console.log(response.data)},(response) =>{ }); 
                              this.$http.get('/order/getCount/'+this.type).then((response) => {this.ordersCount=response.data; console.log(response.data)},(response) =>{ });       

                        },(response) =>{ this.$notify.error('未知错误')});

              },
              submitEditOrder:function(){
                  console.log('submitEditOrder');
                  this.editOrderV = false;
                  this.editOrderItem._token = '{{csrf_token()}}';
                  this.$http.post('/order/update/'+this.editOrderItem.id,this.editOrderItem).then((response)=>{this.$notify.info(response.data);
                              this.$http.get('/order/getCurrent/'+this.ordersCurrentPage+'/'+this.type).then((response) => {this.orders=response.data; console.log(response.data)},(response) =>{ }); 
                              this.$http.get('/order/getCount/'+this.type).then((response) => {this.ordersCount=response.data; console.log(response.data)},(response) =>{ });        

                        },(response) =>{ });
              },
              cancelAddOrder:function(){
                  console.log('cancelAddOrder');
              },
              lookRow:function(val){
                 this.$http.get('/order/search/'+val.id).then((response) => {this.orders=response.data; this.ordersCount = this.orders.length;console.log('word,orders,success')},(response) =>{ console.log(response);}); 
              },
              editRow:function(){
                 this.editOrderV=true;
                 this.editOrderItem=this.multipleSelection[0]
                  console.log(this.editOrderItem);
              },
              delRow:function(val){
                  console.log(val);
                  this.$http.post('/order/del',{_token:'{{csrf_token()}}',date:this.multipleSelection}).then((response) => {this.$notify.info(response.data);
                                this.$http.get('/order/getCurrent/'+this.ordersCurrentPage+'/'+this.type).then((response) => {this.orders=response.data; console.log(response.data)},(response) =>{ }); 
                                this.$http.get('/order/getCount/'+this.type).then((response) => {this.ordersCount=response.data; console.log(response.data)},(response) =>{ });       

                          },(response) =>{ }); 

              },
              getOrdersCurrentPage:function(val){
                  console.log(val);
                  this.ordersCurrentPage=val;
                  this.$http.get('/order/getCurrentAllot/'+this.ordersCurrentPage).then((response) => {this.orders=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/order/getCountAllot/').then((response) => {this.ordersCount=response.data; console.log(response.data)},(response) =>{ });          
              },
            
              checkChange:function(rows){
                     if (rows) {
                        rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row);
                        });
                      } else {
                        this.$refs.multipleTable.clearSelection();
                      }
              }, 
              checkOne:function (val) {
                console.log('11');
                console.log(val);
                this.multipleSelection = val;
              } ,
         },

  });
</script>




@endsection

@section('pagejs')

@endsection

        




